<template>
  <div class="c-p" :class="[theme, cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']">
    <watermark
      v-if="showExamWatermark"
      :watermarkContent="examWatermarkConfig && examWatermarkConfig.contentType == 2 ? examWatermarkConfig.content : ''"
      :fontSize="examWatermarkConfig && examWatermarkConfig.size ? examWatermarkConfig.size : 14"
      :contentFillStyle="examWatermarkConfig && examWatermarkConfig.color ? examWatermarkConfig.color : '#999999'"
      :opacityNum="examWatermarkConfig ? examWatermarkConfig.transparent / 100 : 0.3"
    ></watermark>
    <div>
      <countdown ref='startAnimation' v-if="showStart" @hideCountdown="hideCountdown"></countdown>
      <div v-show="!showStart" class="c-pb100" v-if="questionInfo!=null">
        <div class="c-ph24 c-flex-row c-aligni-center c-fs24 c-hh100 c-fc-xblack">
          <span v-if="questionInfo.paperType != 3">{{questionInfo.number}}/{{questionInfo.wholeNum}}</span>
          <span class="c-flex-grow1 c-pl48 c-w0">{{answerTime}}</span>
          <span v-if="questionInfo.paperInfo && questionInfo.paperInfo.isStop != -1" class="iconfont c-pr40 c-fs32" @click="clickPause">&#xe7a7;</span>
          <div v-if="questionInfo.paperType != 3" @click="clickNextQuestion(3)" class="theme-bg c-fc-white c-br10 c-ww90 c-hh48 c-fs24 c-lh48 c-textAlign-c">交卷</div>
        </div>
        <div class="time-bg-bar" v-if="enableLimitTime != -1">
          <div class="time-bar" :style="{width: timeProcess + '%'}"></div>
        </div>
        <div class="c-ph24 c-fs-36 c-fw-b c-pv10">
          {{questionInfo.type==1?'单选题':(questionInfo.type==2?'多选题':(questionInfo.type==3?"问答题":(questionInfo.type==4?"判断题":(questionInfo.type==5?"填空题":""))))}}
        </div>
        <div class="c-ph24 c-pb60 c-fs28 c-pt28 c-flex-row">
          <span class="c-ws-n" v-if="questionInfo.paperType != 3">{{questionInfo.number2}}.</span>
          <span class="c-fs28 c-fc-xblack c-wb-ba" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="questionInfo.problem"></span>
        </div>
        <div v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4">
          <div v-for="(item,index) in optionsList" :key="index" class="c-ph24 c-flex-row c-pv20 c-fs28 c-mh90" @click="clickOption(index)">
            <!--<div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c" :class="answerList[index] ? 'c-bg-blue c-fc-white':'c-bg-mgray'">{{item.type}}</div>-->
            <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c" :class="optionClass[index]">{{item.type}}</div>
            <div class="c-pl20 c-lh50 c-wb-ba copyNot" v-html="item.name"></div>
          </div>
        </div>
        <div class="c-ph24" v-if="questionInfo.type==3">
          <div class="c-w100 c-br10 c-bd1-mgray c-bg-fa c-ph20 c-pt20">
            <textarea v-model="essayAnswer" @focus='inputFocus' @blur='inputBlur' name="" id="inputArea" cols="30" rows="10" placeholder="请输入答案" class="needsclick show c-fs24 c-fc-xblack c-lh40 c-w100 c-bg-fa short-answer-textarea"></textarea>
            <div class="c-pt30 c-flexw-wrap c-flex-row">
              <div v-for="(item,index) in uploadImgList" :key="index" class="c-ww160 c-hh160 c-mb24 c-flex-row c-flex-center c-p c-br10" :class="index % 3 == 0 ? '':'c-ml20'">
                <div @click="delUploadImage(index)" class="c-fc-white del-img">x</div>
                <img @click="clickPreviewImage(item.url)" class="c-ww160 c-hh160" :src="$addXossFilter(item.url)" alt="" />
              </div>
              <div class="c-ww160 c-hh160 c-mb24 c-p" :class="uploadImgList.length % 3 == 0 ? '':'c-ml20'">
                <div class="c-ww160 c-hh160 c-bd-d1-mgray c-bg-white c-br10 c-pt32" @click="clickAnswerPic">
                  <div class="c-fs80 c-textAlign-c c-lh50 orange-opa">+</div>
                  <div class="c-fs22 c-fc-sblack c-textAlign-c c-mt20">上传图片</div>
                </div>
                <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww160 c-hh160 c-fs10" v-if="!isWeiXin" ref="uploadImg" name="file" type="file" accept="image/*" @change="clickAnswerPic($event)" />
              </div>
            </div>
          </div>
        </div>
        <div class="c-ph24 c-mt24" v-if="!showAnalysis && questionInfo.type==5">
          <div class="c-flex-row c-mb40" v-for="(item,index) in fbAnswer" :key="index">
            <div class="c-fs28 c-fc-xblack c-mr32 c-ww54 c-hh54 c-br36 c-bd1-mgray c-flex-row c-flex-center c-flex-shrink0">{{index + 1}}</div>
            <div class="c-flex-grow1 c-mr10 c-bd-b1-mgray"><input type="text" name="" id="" v-model="item.value" class="c-w100 c-fs28 c-fc-xblack c-bd0"></div>
          </div>
        </div>
        <div class="c-ph24 c-flex-row c-mt44 c-justify-sb" v-if="showAnalysis && (questionInfo.type<=2 || questionInfo.type==4)">
          <div class="c-fs24 c-fc-xblack copyNot">参考答案：{{questionInfo.type==4?(questionInfo.answer==1?'正确':'错误'):questionInfo.answer}}</div>
          <div class="c-fs24 c-fc-xblack c-mr68 copyNot">您的答案：<span class="c-fc-sorange">{{userAnswer==''?'未答题':userAnswer}}</span></div>
        </div>
        <div class="c-ph24 c-mt44" v-if="showAnalysis && questionInfo.type==3">
          <div class="c-fs28 c-fc-1b c-fw-b">您的答案：</div>
          <div class="c-fs24 c-fc-xblack c-mt14 c-ph20 c-pv16 c-br6 c-bd1-mgray copyNot">{{essayAnswer}}</div>
          <div class="c-pt30 c-flexw-wrap c-flex-row" v-if="uploadImgList.length > 0">
            <div v-for="(item,index) in uploadImgList" :key="index" class="c-ww160 c-hh160 c-mb30 c-flex-row c-flex-center c-p " :class="index % 3 == 0 ? '':'c-ml20'">
              <img @click="clickPreviewImage(item.url)" class="c-ww160 c-hh160" :src="$addXossFilter(item.url)" alt="" />
            </div>
          </div>
        </div>
        <div class="c-ph24 c-mt44" v-if="showAnalysis && questionInfo.type==5">
          <div class="c-fs28 c-fc-1b c-fw-b">您的答案：</div>
          <div class="c-flex-row c-mt24 c-aligni-center" v-for="(item,index) in fbAnswer" :key="index">
            <div class="c-fs24 c-fc-xblack c-mr24 c-ww40 c-hh40 c-br36 c-bd1-mgray c-flex-row c-flex-center c-flex-shrink0">{{index + 1}}</div>
            <div class="c-fs24 c-fc-xblack c-flex-grow1 c-mr10">{{item.value.trim() == ''?'未答题':item.value}}</div>
          </div>
        </div>
        <div class="c-ph24 c-mt44" v-if="showAnalysis && questionInfo.type==3">
          <div class="c-fs28 c-fc-1b c-fw-b">参考答案：</div>
          <div class="c-fs24 c-fc-xblack c-mt14 c-text-indent50 c-ph10 copyNot">{{questionInfo.answer}}</div>
        </div>
        <div class="c-ph24 c-mt44" v-if="showAnalysis && questionInfo.type==5">
          <div class="c-fs28 c-fc-1b c-fw-b">参考答案：</div>
          <div class="c-flex-row c-mt24 c-aligni-center" v-for="(item,index) in questionInfo.answer" :key="index">
            <div class="c-fs24 c-fc-xblack c-mr24 c-ww40 c-hh40 c-br36 c-bd1-mgray c-flex-row c-flex-center c-flex-shrink0">{{index + 1}}</div>
            <div class="c-fs24 c-fc-xblack c-flex-grow1 c-mr10">{{item.value}}</div>
          </div>
        </div>
        <div class="c-ph24 c-mt44" v-if="showAnalysis && questionInfo.isAnalysis==1">
          <div class="c-fs28 c-fc-1b c-fw-b">解析：</div>
          <div class="c-fs24 c-fc-xblack c-mt14 c-text-indent50 c-ph10 copyNot" v-if="questionInfo.analysis != '' && questionInfo.analysis != ' '" v-html="questionInfo.analysis"></div>
          <div class="c-fs24 c-fc-xblack c-mt14 c-text-indent50 c-ph10" v-if="questionInfo.analysis == '' || questionInfo.analysis == ' '">无</div>
        </div>
      </div>

      <div v-show="isPause" class="c-h c-pf c-pz99 c-p-t0 c-p-l0 c-w100 c-bg-f3 c-flex-column c-aligni-cente c-justify-center">
        <div class="c-fc-smblue c-fs48 c-textAlign-c">休息中...</div>
        <div class="btn-pause" @click="clickGoOn">继续做题</div>
        <div class="btn-pause" @click="clickRestart">重新开始</div>
        <div class="btn-pause" @click="clickExit">退出测试</div>
      </div>
      <div class="btn-wrap c-flex-row c-justify-sb" v-show="questionInfo!=null && questionInfo.paperType != 3">
        <div v-show="!showStart" v-if='examModel==2 && questionInfo!=null && (questionInfo.type==2 || questionInfo.type==3 || questionInfo.type==5)' class="btn-next-question c-flex-grow1" :class="showAnalysis==true?'c-fc-sgray':''" @click="showAnswer">确定</div>
        <div v-show="!showStart" class="btn-next-question c-flex-grow1" v-if='isOver==0' @click="clickNextQuestion(1)">下一题</div>
        <div v-show="!showStart" class="btn-next-question c-flex-grow1" v-if='isOver==1' @click="clickNextQuestion(2)">提交</div>
      </div>
      <div v-show="showOptionAnswer" class="c-ph24 c-pt120 c-h c-pf c-pz99 c-p-t0 c-p-l0 c-w100 c-bg-white c-contexty-scroll">
        <div class="c-bg-f3 c-pt44 c-pb44 c-hh500 c-ph24 c-content-scroll c-br10">
          <div class="c-fs36 c-lh50 c-fc-xblack c-textAlign-c">{{optionTypeRes ? optionTypeRes.title : ''}}</div>
          <div class="c-fc-sxblack c-fs28 c-lh50 c-mt28" v-html="optionTypeRes ? optionTypeRes.comment : ''"></div>
        </div>
        <div class="c-mt32 c-pt28 c-bd-t1 c-ph24" v-if="optionTypeRes && optionTypeRes.courseInfo && optionTypeRes.courseInfo.length > 0">
          <div class="c-fs28 c-fc-xblack">相关推荐</div>
          <div class="c-mt28" v-for="(item, index) in optionTypeRes.courseInfo" :key="index">
            <div class="c-flex-row" @click="clickCourse(0, item.id)" v-if="item.linkType == 1051">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis1 c-fc-xblack">{{item.name}}</div>
                <div class="c-fs18 c-fc-gray">讲师：{{item.teacherName!=''&&item.teacherName!=null?item.teacherName:'未知'}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">视频</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickCourse(1, item.id)" v-if="item.linkType == 1052">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis1 c-fc-xblack">{{item.name}}</div>
                <div class="c-fs18 c-fc-gray">讲师：{{item.teacherName!=''&&item.teacherName!=null?item.teacherName:'未知'}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">音频</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickCourse(2, item.id)" v-if="item.linkType == 1053">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis1 c-fc-xblack">{{item.name}}</div>
                <div class="c-fs18 c-fc-gray">讲师：{{item.teacherName!=''&&item.teacherName!=null?item.teacherName:'未知'}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">图文</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickColumn(item.id)" v-if="item.linkType == 9">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsi2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">专栏</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickLive(item.id)" v-if="item.linkType == 51">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">直播</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickActive(item.id)" v-if="item.linkType == 7">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">活动</div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickPackage(item.id)" v-if="item.linkType == 61">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww100 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">知识套餐</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickTraining(item.id)" v-if="item.linkType == 78">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww80 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">训练营</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickClockIn(item.id)" v-if="item.linkType == 41">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">打卡</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickSocialGroup(item.id)" v-if="item.linkType == 10">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">社群</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickDatum(item.id)" v-if="item.linkType == 8">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6 c-bd1-ccc">
                <img v-if="item.cover" class="c-w100 c-center imgCloseBig" :src="$addXossFilter(item.cover)" alt="" />
                <img v-else-if="OFFICE_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_doc.png" alt="" />
                <img v-else-if="IMG_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_pic.png" alt="" />
                <img v-else-if="AUDIO_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_audio.png" alt="" />
                <img v-else-if="VIDEO_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_video.png" alt="" />
                <img v-else class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_com.png" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww60 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">资料</div>
                  <div class="c-fs22  theme-fc" v-if="item.permission == 21">
                    <span>加密</span>
                  </div>
                  <div class="c-fs22  theme-fc" v-else>
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickMutual(item.id)" v-if="item.linkType == 75">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww100 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">互动测评</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickSpeech(item.id)" v-if="item.linkType == 77">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6">
                <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww100 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">语音测试</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-flex-row" @click="clickMall(item.id)" v-if="item.linkType == 12">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-p c-br6 c-bd1-ccc">
                <img class="c-ww100 c-center imgCloseBig" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ww100 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">商城商品</div>
                  <div class="c-fs22  theme-fc">
                    <span class="c-fs22" v-if="Number(item.price) != 0">￥</span><span>{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-mt40 c-flex-row c-flex-center c-mb40">
          <div @click="goOptionNextQuestion" class="c-flex-row c-flex-center c-fs24 c-textAlign-c c-ww180 c-hh64 c-lh64 c-br36 c-fc-sblack c-bd1-gray">下一题</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Countdown from "@/components/templates/countdown.vue";
import watermark from "@/components/templates/common/watermark.vue";
//import ExaminationResult from "@/components/homePage/examination/examinationResult.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js"
let curanswerTime = 0;
let countDownTime = 0;
let aswerControl;
let countDownControl;
let inputScrollTop = 0;
let serverIdImgArr = []; //上传图片的serverID
let imgData = {};
let startSt = 0; //记录学习时长开始时间
let endSt = 0; //记录学习时长结束时间
let playedDuration = 0; //累计观看时长
export default {
  name: "mutuaAnswer",
  components: {
    Countdown,
    watermark
    //  ExaminationResult
  },
  props: [],
  data() {
    return {
      wHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      cfg: JSON.parse(localStorage.getItem("cfg")),
      examinationInfo: null,
      testRes: null,
      answerCardList: [],
      review: '',
      hasCommit: false,
      isOver: 0,
      paperMainId: -1,
      paperDetailId: -1,
      topicId: -1,
      examId: -1,
      num: 1,
      showStart: true,
      isPause: false,
      answerTime: "00:00:00",
      questionInfo: null,
      optionsList: [],
      answerList: [false, false, false, false, false, false, false, false, false, false],
      timeProcess: 100,
      limitTime: 10,
      enableLimitTime: 0, //做题时是否限制时间 -1 不限制 1限制每道题 2限制总时间
      examModel: -1, //1考试模式 2练习模式
      everyTime: 0, //限制每道题的时间(单位秒)
      totalTime: 0, //做题限制的总时间（单位秒）
      isTimeUp: false,
      showAnalysis: false, //是否已经展示解析
      userAnswer: '',
      optionClass: [],
      examType: 0,
      essayAnswer: "", //问答题用户回答的内容
      fbAnswer: null, //填空题用户回答的内容
      uploadImgList: [], //需要上传的图片
      showOptionAnswer: false,
      optionTypeRes: null,
      isWeiXin: true,
      ttId: "",
      tpId: "", //环节id
      tlId: "",
      progress: "",
      showExamWatermark: false,
      examWatermarkConfig: JSON.parse(localStorage.getItem("examWatermarkConfig")) || ''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("答题");// eslint-disable-line
  },
  deactivated() {
  },
  mounted() {
    this.isWeiXin = utilJs.isWeiXin();
    this.timeProcess = 100;
    countDownTime = 0;
    this.isTimeUp = false;
    this.hasCommit = false;
    curanswerTime = 0;
    this.pauseTimeControl();

    //  this.examId = -1;
    this.paperMainId = this.$route.query.paperMainId;
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    this.topicId = 0;
    this.num = this.$route.query.goOnNum;
    //  this.showResult = this.$route.query.showResult==0 ? false:true;

    this.testRes = null;
    this.answerCardList = [];

    this.answerList = [false, false, false, false, false, false, false, false, false, false];
    this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
    this.essayAnswer = "";
    this.showAnalysis = false;

    this.showOptionAnswer = false;
    this.showExamWatermark = localStorage.getItem('enableExamWatermark') && localStorage.getItem('enableExamWatermark') == '1' ? true : false;
    startSt = 0;
    endSt = 0;
    playedDuration = 0;
    let $this = this;
    utilJs.getMethod(global.apiurl + "mutual/detail/" + this.paperMainId,
      function (res) {
        if (res.permission == false) {
          $this.$routerGo($this, "push", {
            path: "/homePage/mutuaTest/mutuaTestDetail",
            query: { mutuaTestId: $this.paperMainId }
          });
        } else {
          $this.examinationInfo = res;
          $this.wechatShare();
        }
      }
    );
    //  if(!this.showResult) {
    if (this.num == 1) {
      //      this.getQuestion();
    } else {
      this.showStart = false;
      this.getQuestion();
    }
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
        imgData = res;
      });
    }
  },
  methods: {
    //点击回答图片
    clickAnswerPic(event) {
      if (this.uploadImgList.length >= 9) {
        this.$showCjToast({
          text: "图片最多只能传9张",
          type: "warn",
        });
        return;
      };
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: 9, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 9 - this.uploadImgList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        });
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'mutua', res => {
          let urlObj = {
            url: res
          };
          this.uploadImgList.push(urlObj)
        }, fRes => {});
      }
    },

    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage({
          localId: localIds[localIdsLength]
        }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },

    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(global.apiurl + "signCard/downWxImg ", {
        serverId: JSON.stringify(serverIdArr),
        mediaType: 2
      }, res => {
        this.$loading.hide();
        for (let key of res) {
          if (this.uploadImgList.length >= 9) {
            break;
          }
          let urlObj = {
            url: key
          };
          this.uploadImgList.push(urlObj)
        }
      },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    //删除上传的图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
    },

    //点击图片放大预览
    clickPreviewImage(imgUrl) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of this.uploadImgList) {
        imgArr.push(key.url);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    setAnalysisStyle(userAnswer, rightAnswer) {
      var userAnswerT = userAnswer == '正确' ? 'A' : (userAnswer == '错误' ? 'B' : '');
      var rightAnswerT = rightAnswer == '1' ? 'A' : (rightAnswer == '-1' ? 'B' : '');
      if (this.questionInfo.type == 1 || this.questionInfo.type == 2 || this.questionInfo.type == 4) {
        let lettersT = 'ABCDEF';
        let userArr = [];
        let rightArr = [];
        let aIndex = -1;
        let rIndex = -1;

        userArr = userAnswerT.split('');
        rightArr = rightAnswerT.split('');

        for (let i = 0; i < userArr.length; i++) {
          aIndex = lettersT.indexOf(userArr[i]);
          this.$set(this.optionClass, aIndex, 'analysisUser');
          if (rightAnswerT.indexOf(userArr[i]) == -1) {
            this.optionsList[aIndex].type = "X"
          }
        }
        for (let i = 0; i < rightArr.length; i++) {
          rIndex = lettersT.indexOf(rightArr[i]);
          this.$set(this.optionClass, rIndex, 'analysisRight');
        }
      }
      //  else if (this.questionInfo.type == 3) {
      // }
    },
    clickOption(index) {
      if (this.questionInfo.type == 1 || this.questionInfo.type == 4) {
        if (this.showAnalysis == false) {
          this.answerList = [false, false, false, false, false, false, false, false, false, false, false, false];
          this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
          this.$set(this.answerList, index, true);
          this.$set(this.optionClass, index, 'choose');
          if (this.questionInfo.paperType == 3) { //选项测试
            if (this.isOver == 0) {
              this.optionTypeRes = this.questionInfo.remarkArr[index];
              if (this.optionTypeRes.displayStatus == 2) {
                this.num = this.optionTypeRes.skipNum
                this.showOptionAnswer = false;
                this.clickNextQuestion(1);
              } else {
                this.isOver = 1
                this.showOptionAnswer = false;
                this.clickNextQuestion(4);
              }
            } else {
              this.clickNextQuestion(4); //type == 4 选项测试最后一道
            }
          }
          if (this.examModel == 2) { //练习模式
            this.userAnswer = this.transAnswerText();

            this.setAnalysisStyle(this.userAnswer, this.questionInfo.answer);
            this.showAnalysis = true;
            clearInterval(countDownControl);
          }
        }
      } else if (this.questionInfo.type == 2) {
        if (this.showAnalysis == false) {
          this.$set(this.answerList, index, !this.answerList[index]);
          if (this.optionClass[index] == 'choose') {
            this.$set(this.optionClass, index, 'noChoose');
          } else if (this.optionClass[index] == 'noChoose') {
            this.$set(this.optionClass, index, 'choose');
          }
        }
        //      this.answerList[index] = !this.answerList[index];
      }
    },
    hideCountdown() {
      if (this.showStart == true) {
        this.showStart = false;
        this.getQuestion();
      }
    },
    aswerTimeControl() {
      //答题时间计时器
      let that = this;
      aswerControl = setInterval(function () {
        curanswerTime++;
        that.answerTime = that.timeToStr(curanswerTime);
      }, 1000);
    },
    aswerTimeCountDown() {
      //答题时间倒计时
      let that = this;

      countDownControl = setInterval(function () {
        countDownTime = countDownTime + 10;
        that.timeProcess = 100 - countDownTime * 100 / (that.limitTime * 1000)
        if (that.timeProcess <= 0) {
          if (that.examModel == 1 || that.examModel == 3) {
            if (that.isOver == 0 && that.enableLimitTime == 1) { //单题答题时间到，不是最后一题
              that.isTimeUp = true;
              that.clickNextQuestion(1)
            } else if (that.isOver == 1 && that.enableLimitTime == 1) { //单题答题时间到，并且是最后一题
              that.isTimeUp = true;
              that.clickNextQuestion(2)
            } else if (that.enableLimitTime == 2) { //总的答题时间到
              that.isTimeUp = true;
              that.clickNextQuestion(3)
            }
          } else if (that.examModel == 2) { //练习模式
            that.isTimeUp = true;
            that.userAnswer = that.transAnswerText();
            if (that.questionInfo.type != 5) {
              that.setAnalysisStyle(that.userAnswer, that.questionInfo.answer);
            }
            that.showAnalysis = true
          }
        }
      }, 10);
    },
    pauseTimeControl() {
      //暂停，清楚计时器
      clearInterval(aswerControl);
      clearInterval(countDownControl);
    },
    timeToStr(timeSecond) {
      //将秒转化为00:00:00格式
      let hour =
        Math.floor(timeSecond / 3600) >= 10
          ? Math.floor(timeSecond / 3600)
          : "0" + Math.floor(timeSecond / 3600);
      let minute =
        Math.floor((timeSecond % 3600) / 60) >= 10
          ? Math.floor((timeSecond % 3600) / 60)
          : "0" + Math.floor((timeSecond % 3600) / 60);
      let second =
        Math.floor(timeSecond % 60) >= 10
          ? Math.floor(timeSecond % 60)
          : "0" + Math.floor(timeSecond % 60);
      return hour + ":" + minute + ":" + second;
    },
    clickPause() {
      //点击暂停
      this.isPause = true;
      this.pauseTimeControl();
    },
    transAnswerText() {
      var answerText = '';
      let lettersT = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'];
      if (this.questionInfo.type == 1 || this.questionInfo.type == 2) {
        for (let i = 0; i < this.optionsList.length; i++) {
          if (this.answerList[i] == true) {
            answerText = answerText + lettersT[i];
          }
        }
      } else if (this.questionInfo.type == 4) {
        if (this.answerList[0] == true) {
          answerText = "正确";
        } else if (this.answerList[1] == true) {
          answerText = "错误";
        }
      } else if (this.questionInfo.type == 3) {
        answerText = this.essayAnswer;
      } else if (this.questionInfo.type == 5) {
        answerText = this.fbAnswer;
      }
      return answerText
    },
    clickNextQuestion(type) {
      let answerText = '';
      let $this = this;

      answerText = this.transAnswerText();
      let fbComplete = false;
      if (this.questionInfo.type == 5) {
        $this.fbAnswer.forEach(item => {
          if (item.value.trim() == "") {
            fbComplete = true;
          }
        })
      }

      if (((this.questionInfo.type != 5 && this.questionInfo.type != 3 && answerText.trim() == "") || (this.questionInfo.type == 3 && answerText.trim() == "" && this.uploadImgList.length == 0) || (this.questionInfo.type == 5 && fbComplete)) && this.isTimeUp == false) {
        this.$showCjToast({
          text: (this.questionInfo.type == 3 || this.questionInfo.type == 5) ? "请填写答案" : "请选择答案",
          type: "warn"
        });
      } else {
        clearInterval(aswerControl);
        clearInterval(countDownControl);
        this.isTimeUp = false;
        let answerCommit = {
          paperDetailId: $this.paperDetailId,
          options: answerText,
          examId: $this.examId,
          totalTime: curanswerTime,
          examOver: $this.isOver
        };
        if (this.questionInfo.type == 3 && this.uploadImgList.length > 0) {
          answerCommit.imgArr = this.uploadImgList;
        }
        if (this.questionInfo.type == 4) {
          if (answerCommit.options == '正确') {
            answerCommit.options = 1;
          } else if (answerCommit.options == '错误') {
            answerCommit.options = -1;
          }
        }
        if (this.questionInfo.type == 5) {
          answerCommit.options = this.fbAnswer;
        }
        if (type == 3) {
          answerCommit.examOver = 1;
        }

        if (this.hasCommit == false) {
          this.hasCommit = true;
          utilJs.postMethod(global.apiurl + 'exam/saveAnswer', answerCommit, function (res) {
            if ($this.examModel == 2) {
              $this.showAnalysis = false;
            }
            if (type == 1) { //进入下一题
              if ($this.enableLimitTime == 1) {
                $this.timeProcess = 100;
                countDownTime = 0;
              }
              if (!$this.showOptionAnswer) {
                $this.getQuestion();
              }
              $this.progress = Math.round(0);
              endSt = new Date().getTime();
              playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
              $this.setProgress()
            } else { //最后一题或者提前交卷
              $this.timeProcess = 100;
              countDownTime = 0;
              endSt = new Date().getTime();
              playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
              if (type == 4) { //选项测试
                $this.$routerGo($this, "replace", {
                  path: "/homePage/mutuaTest/mutuaResult",
                  query: {
                    paperMainId: $this.paperMainId,
                    topicId: $this.topicId,
                    isOption: 1,
                    examId: $this.examId,
                    ttId: $this.$route.query.ttId || "",
                    tpId: $this.$route.query.tpId || "", //环节id
                    tlId: $this.$route.query.tlId || "",
                    progress: 100,
                    duration: playedDuration > 0 ? playedDuration : 0
                  }
                });
              } else {
                $this.$routerGo($this, "replace", {
                  path: "/homePage/mutuaTest/mutuaResult",
                  query: {
                    paperMainId: $this.paperMainId,
                    topicId: $this.topicId,
                    ttId: $this.$route.query.ttId || "",
                    tpId: $this.$route.query.tpId || "", //环节id
                    tlId: $this.$route.query.tlId || "",
                    progress: 100,
                    duration: playedDuration > 0 ? playedDuration : 0
                  }
                });
              }
            }
          },
            failRes => {
              $this.hasCommit = false;
            }

          );
        }
      }
      //    else{
      //      $this.$routerGo($this, "push", {
      //        path: "/homePage/examination/examinationResult",
      //        query: { paperMainId: $this.paperMainId,topicId: $this.topicId }
      //      });
      //    }
    },
     // 记录播放进度
    setProgress: function () {
      let data = {
        ttId: this.ttId, //营期ID
        tpId: this.tpId, //环节ID
        tlId: this.tlId, //课时ID
        ratio: this.progress, //完成进度0-100
        duration: playedDuration > 0 ? playedDuration : 0,
      }
      utilJs.postMethod(`${global.apiurl}k12/trainings/progress`, data, res => {
      });
    },
    getQuestion() {
      this.answerList = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false];
      this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
      this.optionsList = [];
      this.questionInfo = null;
      this.fbAnswer = null;
      this.uploadImgList = [];
      this.essayAnswer = "";
      this.optionTypeRes = null;
      this.showOptionAnswer = false;
      startSt = new Date().getTime();
      endSt = 0;
      playedDuration = 0;
      let $this = this;
      this.$loading.show({
        text: ""
      });
      utilJs.getMethod(global.apiurl + 'exam/examProcess/' + this.paperMainId + '?topicId=' + this.topicId + '&number=' + this.num, function (res) {
        if (JSON.stringify(res) === '[]') {
          $this.$routerGo($this, "replace", {
            path: `/error/emptyPage?from=exam&info=练习题目数量不足，请联系管理人员！`
          });
        }
        if (typeof (res) == 'string') {
          $this.$loading.hide();
          $this.$showCjToast({
            text: res,
            type: 'warn',
          });
          if ($this.paperMainId) {
            $this.$routerGo($this, "replace", {
              path: "/homePage/mutuaTest/mutuaTestDetail",
              query: { mutuaTestId: $this.paperMainId }
            });
          }
          // $this.$router.go(-1);
          return
        }
        $this.$loading.hide();
        $this.hasCommit = false;
        $this.questionInfo = res;
        $this.paperDetailId = res.paperDetailId;
        $this.examId = res.examId;
        $this.examType = res.paperType;
        curanswerTime = res.continueTime;
        $this.enableLimitTime = res.paperInfo.enableLimitTime;
        $this.examModel = res.paperInfo.examModel;

        $this.aswerTimeControl();

        if ($this.enableLimitTime == 1) {
          $this.limitTime = res.paperInfo.everyTime;
          $this.aswerTimeCountDown();
        } else if ($this.enableLimitTime == 2) {
          $this.limitTime = res.paperInfo.totalTime * 60;
          countDownTime = res.continueTime * 1000;
          $this.aswerTimeCountDown();
        } else if ($this.enableLimitTime == -1) {
          clearInterval(countDownControl);
        }
        if ($this.questionInfo.type == 4) {
          $this.questionInfo.optionA = "正确";
          $this.questionInfo.optionB = "错误";
        }
        if ($this.questionInfo.type == 1 || $this.questionInfo.type == 2 || $this.questionInfo.type == 4) {
          const optionArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'];
          for (let i = 0; i < 15; i++) {
            let optionSty = `option${optionArr[i]}`;
            if ($this.questionInfo[optionSty] != '' && $this.questionInfo[optionSty] != null) {
              $this.optionsList.push({ type: optionArr[i], name: $this.questionInfo[optionSty] });
            }
          }
        }
        if ($this.questionInfo.type == 5) { //填空题
          let _obj = JSON.stringify($this.questionInfo.answer); //深拷贝出来处理，不影响原数据
          $this.fbAnswer = JSON.parse(_obj);
          $this.fbAnswer.forEach(item => {
            item.value = "";
          })
        }
        if ($this.questionInfo.paperType != 3) {
          $this.isOver = $this.num < res.wholeNum ? 0 : 1;
        }
        $this.num = $this.num < res.wholeNum ? parseInt($this.num) + 1 : $this.num;
      });
    },
    clickGoOn() {
      //点击继续
      this.isPause = false;
      this.aswerTimeControl();
      if (this.enableLimitTime != -1) {
        this.aswerTimeCountDown();
      }
    },
    clickRestart() {
      //点击重新开始
      let $this = this;
      this.isPause = false;
      this.answerTime = "00:00:00";
      curanswerTime = 0;
      this.isOver = 0;
      this.num = 1;
      this.questionInfo = null;
      this.showStart = true;
      this.essayAnswer = "";
      this.fbAnswer = null;
      this.uploadImgList = [];
      this.showAnalysis = false;
      //    this.$refs.startAnimation.startCount();

      //    clearInterval(countDownControl);
      //    this.timeProcess = 100;
      //    this.countDownTime = 0;
      //    this.aswerTimeCountDown()

      clearInterval(aswerControl);
      clearInterval(countDownControl);

      utilJs.getMethod(global.apiurl + 'exam/transit/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
        $this.timeProcess = 100;
        countDownTime = 0;
        //      $this.getQuestion();
      });
    },
    clickExit() {
      //点击退出测试
      this.isPause = false;
      clearInterval(aswerControl);
      clearInterval(countDownControl);
      this.$router.go(-1);
    },
    getResult(paperMainId, topicId) {
      let $this = this;
      utilJs.getMethod(global.apiurl + 'exam/completeTest/' + paperMainId + '?topicId=' + topicId, function (res) {
        $this.hasCommit = false;
        //      $this.testRes.courseInfo = {};
        //      $this.testRes.courseInfo.courseAvatar = '';
        $this.testRes = res;
        if ($this.testRes.isRemark != -1) {
          $this.review = $this.testRes.remark;
        } else {
          $this.review = '';
        }
      });
      //获取答题卡数据
      utilJs.getMethod(global.apiurl + 'exam/answerCard/' + paperMainId + '?topicId=' + topicId, function (res) {
        $this.hasCommit = false;
        $this.answerCardList = res.answerSheet;
        for (let i = 0; i < res.notAnswerNum; i++) {
          $this.answerCardList.push('');
        }
      });
    },
    onTestAgain() {
      this.hasCommit = false;
      this.showStart = false;
      this.answerTime = "00:00:00";
      curanswerTime = 0;
      this.pauseTimeControl();
      this.num = 1;
      this.answerList = [false, false, false, false, false, false];
      this.isOver = 0;
      this.questionInfo = null;
      this.essayAnswer = "";
      this.fbAnswer = null;
      this.uploadImgList = [];
      let $this = this;
      utilJs.getMethod(global.apiurl + 'exam/transit/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
        //      $this.getQuestion();
        $this.showResult = false;
        $this.showStart = true;
        // $this.$refs.startAnimation.startCount();
      })
    },
    onAnalysis() {
      this.$routerGo(this, "push", {
        path: '/homePage/examination/examinationAnswerAnalyze',
        query: { paperMainId: this.paperMainId, topicId: this.topicId }
      });
    },
    onRanking() {
      this.$routerGo(this, "push", {
        path: '/homePage/examination/examinationRank',
        query: { paperMainId: this.paperMainId }
      });
    },
    onExamShare() {
      this.$routerGo(this, "push", {
        path: '/homePage/examination/examinationSpread',
        query: { paperMainId: this.paperMainId, topicId: this.topicId }
      });
    },
    showAnswer() {
      if (this.showAnalysis == false) {
        let fbComplete = false;
        if (this.questionInfo.type == 5) {
          this.fbAnswer.forEach(item => {
            if (item.value.trim() == "") {
              fbComplete = true;
            }
          })
        }
        this.userAnswer = this.transAnswerText();
        if ((this.questionInfo.type != 5 && this.userAnswer.trim() == "") || (this.questionInfo.type == 5 && fbComplete)) {
          this.$showCjToast({
            text: this.questionInfo.type <= 2 ? "请选择答案" : "请填写答案",
            type: "warn"
          });
        } else {
          if (this.questionInfo.type != 5) {
            this.setAnalysisStyle(this.userAnswer, this.questionInfo.answer);
          }
          this.showAnalysis = true;
          clearInterval(countDownControl);
        }
      }
    },
    clickCourse: function (type, courseId) {
      switch (type) {
        case 0:
          this.$routerGo(this, "replace", {
            path: "/homePage/course/video",
            query: {
              courseId: courseId,
              extId: -1,
              ckFrom: global.ckFrom.course
            }
          });
          break;
        case 1:
          this.$routerGo(this, "replace", {
            path: "/homePage/course/voice",
            query: {
              courseId: courseId,
              extId: -1,
              ckFrom: global.ckFrom.course
            }
          });
          break;
        case 2:
          this.$routerGo(this, "replace", {
            path: "/homePage/course/imgText",
            query: {
              courseId: courseId,
              extId: -1,
              ckFrom: global.ckFrom.course
            }
          });
          break;
      }
    },
    clickColumn: function (columnId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/column/columnDetail",
        query: {
          cId: -1,
          extId: columnId,
          ckFrom: global.ckFrom.column
        }
      });
    },
    clickLive: function (liveId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/live/liveDetail",
        query: {
          liveId: liveId
        }
      });
    },
    clickActive: function (activeId) {
      this.$routerGo(this, "replace", {
        path: "/activity/activityDetail",
        query: {
          ActivityNo: activeId,
          from: 'activity'
        }
      });
    },
    clickPackage: function (combosId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/package/packageDetail",
        query: {
          combosId: combosId
        }
      });
    },
    clickTraining: function (campId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/camp/campDetail",
        query: {
          campId: campId,
          ckFrom: global.ckFrom.camp
        }
      });
    },
    clickClockIn: function (clockInId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/clockIn/clockInDetail",
        query: {
          clockInId: clockInId
        }
      });
    },
    clickSocialGroup: function (SocialRoomId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/socialGroup/socialGroupInfo",
        query: {
          SocialRoomId: SocialRoomId
        }
      });
    },
    clickDatum: function (datumId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/datum/datumDetail",
        query: {
          datumId: datumId
        }
      });
    },
    clickMutual: function (mutuaTestId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/mutuaTest/mutuaTestDetail",
        query: {
          mutuaTestId: mutuaTestId
        }
      });
    },
    clickSpeech: function (paperMainId) {
      this.$routerGo(this, "replace", {
        path: "/homePage/voiceTest/voiceTestDetail",
        query: {
          paperMainId: paperMainId
        }
      });
    },
    clickMall: function (shopNo) {
      this.$routerGo(this, "replace", {
        path: "/mall/shopDetail/shopDetail",
        query: {
          shopNo: shopNo
        }
      });
    },
    goOptionNextQuestion: function () {
      this.getQuestion();
    },
    //分享
    wechatShare: function () {
      let title = this.examinationInfo.name;
      let shareImg = this.examinationInfo.avatar || require('../../../assets/examination_defult.png');
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/mutuaTest/mutuaTestDetail?mutuaTestId=${this.paperMainId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.examinationInfo.description;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = this.examinationInfo.name;
      let shareImg = this.examinationInfo.avatar || require('../../../assets/examination_defult.png');
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/mutuaTest/mutuaTestDetail?mutuaTestId=${this.paperMainId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.examinationInfo.description;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(aswerControl);
    clearInterval(countDownControl);
    next();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.btn-wrap {
  width: 100%;
  max-width: 640px;
  border-top: 1px solid #ddd;
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 11;
}
.btn-next-question {
  font-size: 0.7rem;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
}
.btn-pause {
  font-size: 0.8rem;
  width: 7.5rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 1rem;
  border: 1px solid #999;
  background-color: #fff;
  margin: 1.65rem auto 0 auto;
}
.op-type {
  flex-shrink: 0;
}
.c-mh90 {
  min-height: 2.25rem;
}
.time-bg-bar {
  height: 2px;
  position: relative;
  background: #01a1e4;
}
.time-bar {
  height: 2px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e2e2e2;
}
.c-mr68 {
  margin-right: 1.7rem;
}
.noChoose {
  background-color: #ededed;
}
.choose {
  color: #fff;
  background-color: #1ba3e4;
}
.analysisRight {
  color: #fff;
  background-color: #51caa0;
}
.analysisUser {
  color: #fff;
  background-color: #f09600;
}
.c-fc-1b {
  color: #1b1b1b;
}
.c-text-indent50 {
  text-indent: 1.25rem;
}
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
}
textarea {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}
.c-ww54 {
  width: 1.35rem;
}
.short-answer-textarea {
  height: 5.75rem;
  outline: none;
  border: none;
  -webkit-appearance: none;
  resize: none;
}
.del-img {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  cursor: pointer;
  font-size: 0.6rem;
  background-color: #ccc;
  border-radius: 50%;
  border: 2px solid #fff;
  width: 0.9rem;
  height: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.orange-opa {
  color: rgba(255, 120, 0, 0.6);
}
.icon-course-mark {
  position: absolute;
  bottom: 0.1rem;
  right: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>